<div class="input-container">
    <input #input [placeholder]="'market.search.search' | translate" (keyup)="onKeyup()" (focus)="onFocus()"
        (blur)="onBlur($event)">
    <button class="small" appAnnotation="market.filter" (click)="onToggleClick()"
        [title]="'market.bar.toggle' | translate">
        <mat-icon> filter_list </mat-icon>
    </button>
    <button class="small" appAnnotation="market.reset" (click)="onResetClick()"
        [title]="'market.bar.reset' | translate">
        <mat-icon> restore </mat-icon>
    </button>
    <ng-container *ngIf="records$ | async as records">
        <button class="small" (click)="recordsVisible$.next(!recordsVisible$.value)"
            [title]="'market.bar.history' | translate" [disabled]="!records.length">
            <mat-icon> history_edu </mat-icon>
        </button>
        <div class="records" *ngIf="recordsVisible$ | async">
            <div class="record" *ngFor="let record of records" (click)="onResetClick(record)">
                {{record | tradeSearchText}}
            </div>
        </div>
    </ng-container>
    <button (click)="onSearch()" appAnnotation="market.search">{{'market.bar.search' | translate}}</button>
    <ng-container *ngIf="entries$ | async as entries">
        <cdk-virtual-scroll-viewport class="filter"
            [style.height.px]="(entries.length * 30 > 240 ? 240 : entries.length * 30)"
            [class.shown]="filterVisible$ | async" itemSize="30" minBufferPx="200" maxBufferPx="400">
            <div class="entry" [class.group]="entry.group" [class.item]="!entry.group" [innerHTML]="entry.text"
                (click)="onItemClick(entry.value)" *cdkVirtualFor="let entry of entries; templateCacheSize: 0">
            </div>
        </cdk-virtual-scroll-viewport>
    </ng-container>
</div>